<template>
  <div class="pay-wrap container">
    <div class="pay-title"><i class="edu-icon-dingdan edu-icon--left"></i>我的订单</div>
    <!-- 支付方式 -->
    <div class="pay-way">
      <!--  <el-row type="flex" align="middle" class="time">
        <span>订单提交成功，请尽快完成付款</span>
        <eduCountDown :startTime="new Date().getTime()" :endTime="new Date().getTime()+1800000" :secondsTxt="''"></eduCountDown>
      </el-row>
      <el-divider></el-divider> -->
      <div class="title">支付方式</div>
      <edu-payment-choose
        :paymentList="paymentList"
        :payment="pamentVal"
        :balance="balanceTotal"
        :value.sync="pamentVal"
      ></edu-payment-choose>
    </div>
    <!-- 付款信息 -->
    <el-row class="pay-buy" type="flex" align="middle" justify="space-between">
      <div class="left">
        <el-checkbox v-model="buyDeal">我已阅读并同意</el-checkbox>
        <el-link :underline="false" @click="handleKeyword('payment')"
          >《{{ getAgreementTitle('payment') }}》</el-link
        >
      </div>
      <el-row type="flex" align="middle">
        <el-row type="flex" justify="space-between" class="money">
          <el-row type="flex" align="middle" justify="space-between">
            <div class="text">合计</div>
            <div class="price">
              {{ order_pay.payment | formatMoney }}
            </div>
          </el-row>
        </el-row>
        <el-button type="primary" @click="handleOrder" :disabled="disabled">去支付</el-button>
      </el-row>
    </el-row>

    <EduCashier
      ref="payPassword"
      v-model="payPassword"
      :visible.sync="creditVisible"
      @complete="pwdPay"
    ></EduCashier>
  </div>
</template>

<script>
import payment from '@/utils/payment.js'
import EduPaymentChoose from '@/components/EduPaymentChoose'
import EduCashier from '@/components/EduCashier'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    EduPaymentChoose,
    EduCashier
  },
  data() {
    return {
      payType: 'wxpay',
      buyDeal: true,
      orderInfo: {},
      paymentList: [],
      balanceTotal: 0,
      pamentVal: '',
      orderList: {},
      disabled: false,
      creditVisible: false,
      payPassword: '',
      balpwd: 0
    }
  },
  computed: {
    ...mapState({
      order_pay: state => state.order.pay_order
    }),
    ...mapGetters({
      getAgreementTitle: 'projectSetting/getAgreementTitle'
    })
  },
  created() {
    if (this.$util.isEmpty(this.order_pay)) {
      this.$router.go(-1)
    }
    this.handleOrderPay()
  },
  methods: {
    ...mapMutations({
      changeOrderDefault: 'order/SET_ORDER_DEFAULT'
    }),
    // 支付方式
    handleOrderPay() {
      this.$api.getOrderPay(res => {
        this.paymentList = this.changeSort(res.data.payway)
        this.balanceTotal = res.data.balance
        this.balpwd = res.data.balpwd_setus
        const list = ['wxpay', 'alipay', 'lcnpay']
        const val = list.find(k => this.paymentList.includes(k))
        this.pamentVal = val || ''
      })
    },
    changeSort(arr) {
      arr.sort((a, b) => {
        var order = ['wxpay', 'alipay', 'lcnpay']
        return order.indexOf(a) - order.indexOf(b)
      })
      return arr
    },
    // 提交订单
    handleOrder() {
      // 协议
      if (!this.buyDeal)
        return this.$message.warning('阅读并同意' + this.getAgreementTitle('payment'))
      if (this.pamentVal == '') return
      this.disabled = true
      // 余额支付
      if (this.pamentVal == 'lcnpay') {
        // 是否设置支付密码
        if (this.balpwd) {
          // 余额是否足够支付
          if (Number(this.balanceTotal) >= Number(this.order_pay.payment)) {
            this.creditVisible = true
            this.$refs.payPassword.focus()
          } else {
            this.$message.warning('余额不足，请先充值')
          }
        } else {
          this.$messageBox
            .confirm('未设置支付密码', {
              confirmButtonText: '去设置',
              showCancelButton: false,
              showClose: false,
              center: true,
              type: ''
            })
            .then(() => {
              this.$router.push({
                path: '/my/profile/payPwd'
              })
            })
        }
      } else {
        payment.handlePaymentSubmit(
          this.order_pay.order_no,
          this.pamentVal,
          this.order_pay.return_url
        )
      }
      setTimeout(() => {
        this.disabled = false
      }, 300)
    },
    // 密码支付
    pwdPay() {
      payment.handlePaymentSubmit(
        this.order_pay.order_no,
        this.pamentVal,
        this.order_pay.return_url,
        this.payPassword,
        succ => {
          this.creditVisible = false
        },
        err => {
          this.$refs.payPassword.clear()
        }
      )
    },
    handleKeyword(key) {
      this.$router.push({
        path: '/agreement/' + key
      })
    }
  },
  destroyed() {
    this.changeOrderDefault()
  }
}
</script>

<style lang="scss" scoped>
.pay-wrap {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-bottom: 40px;
  background-color: #ffffff;
  .pay-title {
    padding-left: 30px;
    height: 44px;
    font-size: 14px;
    font-weight: 500;
    color: $text-color-secondary;
    line-height: 44px;
    border-bottom: 1px solid #e4e7ed;
  }
  .pay-way {
    margin-top: 70px;
    padding: 0 30px;
    .time {
      font-size: 16px;
      color: $text-color-import;
    }
    .title {
      font-size: 15px;
      font-weight: 500;
      color: $text-color-import;
    }
  }
  .pay-buy {
    margin-top: 60px;
    padding: 0 30px;
    .left {
      ::v-deep .el-checkbox__label {
        font-size: 12px;
        color: $text-color-auxiliary;
      }
      .el-link {
        font-size: 12px;
        @include edu-color-auxiliary;
      }
    }
    .money {
      flex-direction: column;
      width: 130px;
      margin-right: 40px;
      .text {
        font-size: 13px;
        font-weight: 400;
        color: $text-color-secondary;
      }
      .price {
        font-size: 18px;
        font-weight: 500;
        color: $text-color-price;
      }
      .sale {
        font-size: 14px;
        font-weight: 400;
        color: $text-color-secondary;
        background: #fff
          url()
          no-repeat 100% center;
      }
    }
  }
}
</style>
